<template>
  <div class="left">
    <div class="left-title-bg">
      <img src="@/assets/img/tyfp/sjxz.png" alt="">
    </div>
    <div class="mnxl-left-form">
      <el-form class="mnxl-left-form-box" ref="simulatedRef" :model="simulatedform" 
        label-position="right">
        <el-form-item label="事件类型：" prop="simulateEventType">
          <el-radio-group v-model="simulatedform.simulateEventType">
            <el-radio-button label="H辐射" value="H辐射" />
            <el-radio-button label="SW污染" value="SW污染" />
            <el-radio-button label="HX污染" value="HX污染" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="事件名称：" prop="simulateEventName">
          <el-select popper-class="form-select" v-model="simulatedform.simulateEventName" placeholder="请选择事件名称">

          </el-select>
        </el-form-item>
        <el-form-item label="任务名称：" prop="simulateEventName">
          <div style="color: #FFFFFF;">asdasd</div>
        </el-form-item>
        <el-form-item label="地点：" prop="simulateEventName">
          <div style="color: #FFFFFF;">asdasd</div>
        </el-form-item>
      </el-form>

    </div>
    <div class="tyfp-divider"></div>
    <!--  -->
    <div class="jyjc-right-top">
      <div class="jyjc-right-top-head">
        <div class="jyjc-right-top-headtext">当前监测信息：</div>
        <div class="jyjc-right-top-head-cont">
          <div class="jyjc-right-top-head-cont-item" v-for="item in 6" :key="item">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="dividercal"></div>
      <div class="jyjc-right-top-bottom">
        <div class="jyjc-right-top-headtext">当前监测信息：</div>
        <div class="jyjc-right-top-bottom-cont">

          <div class="jyjc-right-top-bottom-cont-item" v-for="item in 6" :key="item">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const simulatedform = ref({
  simulateEventType: 'H辐射',
  simulateEventName: '',
  simulateTrainingScene: '',
})
</script>

<style lang="less" scoped>
.left {
  position: absolute;
  left: 35px;
  top: 108px;
  width: 430px;
  // height: 956px;
  height: calc(100vh - 124px);
  background: rgba(21, 33, 86, 0.6);
  z-index: 2;

  .left-title-bg {
    padding-left: 7px;
    padding-top: 10px;
    width: 100%;
    height: 46px;
    background-image: url('@/assets/img/jsc/lefthead.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    img {
      width: 100px;
      height: 26px;
    }
  }

  .mnxl-left-form {
    padding: 0 25px;

    .mnxl-left-form-box {
      margin-top: 20px;

      .form-text {
        width: 48px;
        height: 17px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #8CCBFF;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        margin-left: 14px;
      }

      .form-btn {
        margin-top: 30px;
        text-align: center;

        .form-btn-sub {
          width: 300px;
          height: 38px;
          border: none;
          background: #FE0404;
          border-radius: 4px;
          color: #fff;
        }

        .form-btn-group {
          margin-top: 12px;
          display: flex;
          text-align: center;
          justify-content: center;

          .form-btn-group-item {
            width: 146px;
            height: 36px;
            border-radius: 4px;
            border: 1px solid #8FC9FF;
            background: transparent;
            color: rgba(148, 204, 255, 1);
          }
        }
      }
    }
  }

  .tyfp-divider {
    width: 390px;
    height: 1px;
    margin: 0 auto;
    background: rgba(231, 238, 255, 0.3);

  }

  .jyjc-right-top {
    width: 390px;
    height: 460px;
    // background: #11375B 0.6;
    border-radius: 4px;
    border: 1px solid #1D6DB7;
    padding-left: 21px;
    margin: 0 auto;
    margin-top: 23px;

    .dividercal {
      width: 350px;
      height: 1px;
      background: rgba(231, 238, 255, 0.3);
    }


    .jyjc-right-top-headtext {
      font-size: 12px;
      color: #8CCBFF;
      line-height: 17px;
      margin-top: 18px;
    }

    .jyjc-right-top-head {
      height: 270px;

      // background: red;
      .jyjc-right-top-head-cont {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;

        .jyjc-right-top-head-cont-item {
          width: 150px;
          color: #fff;
        }
      }


    }

    .jyjc-right-top-bottom {
      height: 100px;
      // background: pink;
      margin-top: 20px;


      .jyjc-right-top-bottom-cont {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;

        .jyjc-right-top-bottom-cont-item {
          width: 150px;
          color: #fff;
        }
      }
    }
  }
}



:deep(.el-form-item__label) {
  color: #fff;
}

:deep(.el-radio-group) {
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
}

:deep(.el-radio-button__inner) {
  background: rgba(17, 55, 91, 1);
  border: none;
  color: #fff;
  width: 84px;
  height: 32px;
  border-radius: 4px !important;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  width: 84px;
  height: 32px;
  border-radius: 4px !important;
  border: none;
}

:deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner) {
  border: none;
  background: linear-gradient(0deg, #2A97FF 0%, #72E5FF 100%);
}
</style>